<template>
  <div class="div_bank2 itemCard">
    <el-card class="box-card">
      <el-tabs type="border-card">
        <el-tab-pane>
          <template #label>
            <div>
              <span>{{title.title1}}</span>
            </div>
          </template>
          <el-table
            v-if="typeDate == 1"
            v-loading="loading"
            load="false"
            ref="multipleTableRef"
            border
            :data="salesOrderList"
            min-height="450px"
            style="width: 100%"
          >
            <el-table-column label="序号" align="center" width="80" fixed="left">
              <template #default="scope">
                <div class="table_style">
                  <span style="margin-left: 5px"
                        v-text="(scope.$index + 1)"
                  ></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="售后分类" align="center" min-width="100" fixed="left" >
              <template #default="scope">
                 <span
                   class="ellipsis"
                 >
                {{scope.row.type_text}}
                 </span>
              </template>
            </el-table-column>
            <el-table-column label="出库单号" align="center" min-width="200" fixed="left" >
              <template #default="scope">
                 <span
                   class="ellipsis"
                 >
                {{scope.row.return_order_id || '--'}}
                 </span>
              </template>
            </el-table-column>
            <el-table-column label="仓库" align="center" min-width="200" fixed="left">
              <template #default="scope">
                 <span
                   class="ellipsis"
                 >
                {{scope.row.warehouse_name}}
                 </span>
              </template>
            </el-table-column>
            <el-table-column label="产品编码" align="center" min-width="100" >
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.goods_no,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center" min-width="150">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.goods_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="产品类型" align="center" min-width="100">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.goods_type,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="补发数量" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
               ><span > {{scope.row.reissue_number || 0}}</span>
               </span>
              </template>
            </el-table-column>
            <el-table-column label="批次号" align="center" min-width="100">
            <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.batch_no,  '')"
               ></span>
            </template>
          </el-table-column>
            <el-table-column label="生产日期" align="center" min-width="100">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.product_date,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="有效期至" align="center" min-width="100">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.expire_date,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="条码" align="center" width="150">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.barcode,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="收货地址" align="center" width="150"  >
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.address,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="收货联系人" align="center" width="150">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.contact_user,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="联系电话" align="center" width="150">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.contact_tel,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.remark,  '')"
               ></span>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            v-else
            v-loading="loading"
            load="false"
            ref="multipleTableRef"
            border
            :data="salesOrderList"
            min-height="450px"
            style="width: 100%"
          >

            <el-table-column label="序号" align="center" width="80" fixed="left">
              <template #default="scope">
                <div class="table_style">
                  <span style="margin-left: 5px"
                        v-text="(scope.$index + 1)"
                  ></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="售后分类" align="center" min-width="100" fixed="left" v-if="typeStatus == 2">
              <template #default="scope">
                 <span
                   class="ellipsis"
                 >
                {{scope.row.type_text}}
                 </span>
              </template>
            </el-table-column>
            <el-table-column label="仓库" align="center" min-width="200" fixed="left" v-if="typeStatus == 1">
              <template #default="scope">
                 <span
                   class="ellipsis"
                 >
                  <el-select
                    filterable
                    v-model="scope.row.warehouse_no"
                    class="width_100"
                    placeholder="请选择"
                    @change="warehouseChange($event,scope.row)"
                  >
                    <el-option v-for="item in warehouse_no_list" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                 </span>
              </template>
            </el-table-column>
            <el-table-column label="仓库" align="center" min-width="200" fixed="left" v-if="typeStatus == 2">
              <template #default="scope">
                 <span
                   class="ellipsis"
                 >
                {{scope.row.warehouse_name}}
                 </span>
              </template>
            </el-table-column>
            <el-table-column label="产品编码" align="center" min-width="100" >
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.goods_no,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center" min-width="150">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.goods_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="产品类型" align="center" min-width="100">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.goods_type,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" min-width="200" v-if="typeStatus == 1">
              <template #header>
                <span style="color: red;">
                  *
                </span>
                <span>
                  数量
                </span>
              </template>
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
               >
                  <el-input-number :precision="0"  @change="countAll(scope.row)" :controls='false' type="number" :min="1"   v-model.trim="scope.row.return_number" clearable class="input_many"/>
                 <!--                 <span  v-if="scope.row.type == '无'"> {{scope.row.return_number || 0}}</span>-->
               </span>
              </template>
            </el-table-column>
            <el-table-column label="单价" align="center" min-width="200" v-if="typeStatus == 1">
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
               >
               <el-input-number v-if="scope.row.status != 'reissue' && scope.row.goods_type != '赠品'" :precision="2" @change="countAll(scope.row)" :controls='false' type="number" :min="0"   v-model.trim="scope.row.unit_price" clearable class="input_many"/>
                 <span  v-else> ￥{{scope.row.unit_price || '0.00'}}</span>
               </span>
              </template>
            </el-table-column>
            <el-table-column :label="type1 == 2? '退货数量':'数量'" align="center" min-width="200" v-if="typeStatus == 2">
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
               ><span > {{scope.row.return_number || 0}}</span>
               </span>
              </template>
            </el-table-column>
            <el-table-column label="单价" align="center" min-width="200" v-if="typeStatus == 2">
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
               >
                 <span > ￥{{scope.row.unit_price || 0}}</span>
               </span>
              </template>
            </el-table-column>
            <el-table-column label="申请退款金额" align="center" width="150">
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
                 v-text="'￥'+_FieldFormat(Number(scope.row.return_amount).toFixed(2) || '0.00',  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="实际退款金额" align="center" width="150" v-if="typeStatus == 2">
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
                 v-text="'￥'+_FieldFormat(Number(scope.row.real_return_amount).toFixed(2) || '0.00',  '')"
               ></span>
              </template>
            </el-table-column >
            <el-table-column label="销售数量" align="center" width="100" v-if="typeStatus == 1">
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
                 v-text="_FieldFormat(scope.row.sales_num || 0,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="销售金额" align="center" width="150" v-if="typeStatus == 1">
              <template #default="scope">
                           <span
                             class="ellipsis numberMoney"
                             v-text="'￥'+_FieldFormat(scope.row.total_amount,  '')"
                           ></span>
              </template>
            </el-table-column>
            <el-table-column label="批次号" align="center" width="100">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.batch_no,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="生产日期" align="center" width="100">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.product_date,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="有效期至" align="center" width="100">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.expire_date,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="条码" align="center" width="150">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.barcode,  '')"
               ></span>
              </template>
            </el-table-column>
<!--            <el-table-column label="收货地址" align="center" width="150" v-if="typeStatus == 2 && typeStatusCode == 'reissue' && type1 !='1'">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.address,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="收货联系人" align="center" width="150" v-if="typeStatus == 2 && typeStatusCode == 'reissue'&& type1 !='1'">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.contact_user,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="联系电话" align="center" width="150" v-if="typeStatus == 2 && typeStatusCode == 'reissue'&& type1 !='1'">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.contact_tel,  '')"
               ></span>
              </template>
            </el-table-column>-->
            <el-table-column label="备注" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.remark,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="70" v-if="route.query.uid && typeStatus != 2 && salesStatus == 1">
              <template #default="props">
                <vab-icon
                  v-if="salesOrderList.length>1"
                  icon="delete-bin-5-line"
                  @click="handleClickRemove(props.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="商品明细信息">
          <template #label>
            <div>
              <span>{{title.title2}}</span>
            </div>
          </template>
          <el-table
            v-loading="loadingDetail"
            load="false"
            ref="multipleTableRef"
            border
            :data="salesOrderDetailList"
            min-height="450px"
            style="width: 100%"
          >
            <el-table-column label="序号" align="center" width="80" fixed="left">
              <template #default="scope">
                <div class="table_style">
                  <span style="margin-left: 5px"
                        v-text="(scope.$index + 1)"
                  ></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="订单编号" align="center" min-width="200" fixed="left">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.order_uid,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="产品编码" align="center" min-width="200" fixed="left">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.goods_no,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="条码" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.barcode,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="品牌" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.brand_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.goods_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="规格型号" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.spec_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="产品类型" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.goods_type,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="销售组织" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.sales_org_name,  '')"
               ></span>
              </template>
            </el-table-column>
<!--            <el-table-column label="结算组织" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.settle_org_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="库存组织" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.stock_org_name,  '')"
               ></span>
              </template>
            </el-table-column>-->
            <el-table-column label="出库单号" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.delivery_order_id,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="发货仓库" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.order_warehouse_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="物流公司" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.order_logistics_code,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="物流单号" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.order_express_code,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" min-width="200">
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.remark,  '')"
               ></span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>

</template>

<script setup lang="ts">
import {FieldFormat} from "/@/utils/utils";
import {ref} from "vue";
import {getProductSearch, productTaxRate} from "/@/api/dms/product";
import salesOrderStore from "/@/views/afterSales/storeList";
import _ from 'lodash'
//监听售后分类
const salesOrderStoreList:any = salesOrderStore()
const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type)
}
const props = defineProps({
  //判断详情或者添加
  typeStatus: {
    type: Number,
    default: 1
  },
  //判断补货还是货
  typeDate:{
    type:Number,
    default: 0
  },
  //判断跳转的退货快递运输
  type1:{
    type:Number,
    default: 0
  }
})
const salesStatus:any = ref(localStorage.getItem('salesStatus'))
const route:any = useRoute()
const loading = ref<boolean>(false)
const salesOrderList = ref<any>([])
const salesOrderData = ref<any>([])
const loadingDetail = ref<boolean>(false)
const salesOrderDetailList = ref<any>([])
const taxRate = ref<any>()
// 退货类型
const goodsRejectedList = ref<any>([ { value: '无', label: '无' }, { value: 'return', label: '退货'}])
const warehouse_no_list = ref([])
// 标题
 const title = ref<any>({title1:'产品信息',title2:'商品明细信息'})
// 获取 仓库接口
const _GetProductSearch = async () => {
  try {
    const tax = await productTaxRate({})
    taxRate.value = tax.data
  } catch (error) { }
}
// 数量计算
const countAll = (value:any)=>{
  const {salesSortValue ,orderList} = salesOrderStoreList ||{}
  if(salesSortValue.label == 'return'){
    const arr = _.cloneDeep(salesOrderList.value)
    salesOrderList.value = arr.map((item:any)=>{
      if(item.order_detail_id == value.order_detail_id){
        const  number = Number(item.unit_price) * Number(item.return_number)
        return {
          ...item,
          return_amount: isNaN(number) ? '0.00' : Number(number).toFixed(2)
        }
      }else {return item}
    })
  }

}
// 选择仓库  根据仓库code获取仓库名称
const  warehouseChange = (va:any,item:any)=>{
  const arr = [...salesOrderList.value]
  const many:any = warehouse_no_list.value.filter((item:any)=>item.value == va)[0]
  salesOrderList.value = arr.map((value, index, array)=>{
    if(value.order_detail_id == item.order_detail_id){
      return {
        ...value,
        warehouse_name:many.label
      }
    }else {
      return value
    }
  })
}
// 删除
const handleClickRemove = (row:any)=>{
  salesOrderList.value = salesOrderList.value.filter((item:any)=>item.order_detail_id !== row.order_detail_id)
  salesOrderDetailList.value = salesOrderDetailList.value.filter((item:any)=>item.order_detail_id !== row.order_detail_id)
}
// typeStatusCode
const typeStatusCode = ref<any>(undefined)
// 抛出数据
defineExpose(
  {
    title,
    salesOrderList,
    salesOrderDetailList
  }
)
//监听 详情或者 订单选择的数据   判断补货与退货是数据
watchEffect(()=>{
  warehouse_no_list.value = taxRate.value && taxRate.value.wms_owner?.map((i:any)=> {return {value:i.owner_no,label:i.short_name}}) || []
  const {salesSortValue ,orderList} = salesOrderStoreList ||{}
  if(orderList){
    salesOrderDetailList.value = orderList.goods_item
    if(salesSortValue.label == 'return'){
      if(salesSortValue.type == 1){
        salesOrderList.value = _.cloneDeep(orderList.after_item)
      }else {
        salesOrderList.value = _.cloneDeep(orderList.after_item).map((item:any)=>{ return{...item,unit_price:Number(item.including_tax_price),return_amount:Number(item.return_number* item.including_tax_price)}})
      }
    }else if(salesSortValue.label == 'reissue') {
      salesOrderList.value = _.cloneDeep(orderList.after_item).map((item:any)=>{return{...item,unit_price:0,return_amount:0.00,status:'reissue'}})
    }else {
      salesOrderList.value = _.cloneDeep(orderList.after_item)
    }
  }
  typeStatusCode.value = salesSortValue.label
})

onMounted(()=>{
  _GetProductSearch()

})
</script>

<style lang="scss" scoped>
.itemCard{
  :deep(){
    .el-tabs__item {
      height: 41px !important;
    }
  }
}
</style>
